import React, { useContext } from 'react'
import { ContextAPI } from '../../App'
import { Observer } from 'mobx-react'
import http from '../../utils/http'

function Main() {
  const context = useContext(ContextAPI)

  const esc = () => {
    window.sessionStorage.removeItem('userInfo')
    window.sessionStorage.removeItem('token')
    context.login.landChange()
  }

  const aaa = async () => {
    const res = await http.get('/login/aaa')
    console.log('get');
  }

  const bbb = async () => {
    const res = await http.post('/login/bbb')
    console.log('post');
  }

  return (
    <div>
      <Observer>
        {
          () => (
            <div>
              <p>{context.test.a}</p>
              <p>{context.c}</p>
              <button onClick={() => context.test.addA()}>mobx的addA</button>
              <button onClick={esc}>退出登陆</button>
              <button onClick={aaa}>get请求测试</button>
              <button onClick={bbb}>post请求测试</button>
            </div>
          )
        }
      </Observer>
      <hr />
      <h1>文件上传</h1>
      <form action="http://localhost:5000/upload" method="post" enctype="multipart/form-data">
        <input id="files" type="file" name="file" multiple />
        <input type="submit" value="上传" />
      </form>
    </div>
  )
}

export default Main
